<template>
  <div class="energy-actual">
    <div class="common-bg-title">实时查询</div>
    <div class="main">
      <el-tabs v-model="active" @tab-click="tabChange">
        <el-tab-pane label="汇总电耗" name="first">
          <actual-chart molType="汇总" />
        </el-tab-pane>
        <el-tab-pane label="车间电耗" name="second">
          <actual-chart molType="车间" />
        </el-tab-pane>
        <el-tab-pane label="当班电耗" name="third">
          <actual-chart molType="当班" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import ActualChart from './modules/actualChart.vue';
export default {
  components: { ActualChart },
  data() {
    return {
      active: 'first'
    };
  },
  methods: {
    tabChange(vue) {
      let com = vue.$children[0];
      this.$nextTick(() => {
        this.$echarts.getInstanceByDom(com.$refs.chart1).resize();
        this.$echarts.getInstanceByDom(com.$refs.chart2).resize();
        this.$echarts.getInstanceByDom(com.$refs.chart3).resize();
        this.$echarts.getInstanceByDom(com.$refs.chart4).resize();
      });
    }
  }
};
</script>

<style lang="scss">
.energy-actual {
  height: 100%;
  overflow: hidden;
  .el-tabs {
    height: 100%;
    .el-tabs__header.is-top {
      padding: 0 20px;
    }
    .el-tabs__nav-wrap::after {
      background-color: #f0f2f6;
    }
  }
  .main {
    height: calc(100% - 36px);
    overflow: hidden;
    padding: 5px 0 0;
    box-sizing: border-box;
    .el-tabs__content {
      height: calc(100% - 40px);
      overflow-y: auto;
    }
  }

  .grid-data {
    display: grid;
    border: 1px solid #eaeaea;
    justify-content: center;
    grid-template-columns: repeat(7, 14.2%);
    margin-bottom: 15px;
    .grid-item {
      height: 110px;
      padding: 10px 0 10px 16px;
      box-sizing: border-box;
      & + .grid-item {
        border-left: 1px solid #eaeaea;
      }
      .name {
        font-size: 14px;
        color: #464b52;
      }
      .sum {
        margin: 8px 0;
        font-family: DINCondensed-Bold;
        font-size: 30px;
        font-weight: bold;
        color: #1e3755;
      }
      .system {
        font-size: 13px;
        color: #606d86;
      }
    }
  }
  .bar-chart {
    height: 230px;
    padding: 0 20px;
    border-bottom: 10px solid #f6f9fc;
    position: relative;
    .toggle-chart {
      position: absolute;
      right: 20px;
      z-index: 199;
      .el-radio-button__inner {
        color: #2c67f6;
        font-size: 16px;
        box-shadow: unset;
        border-color: #2c67f6;
        padding: 5px 10px;
      }
      .el-radio-button.is-active .el-radio-button__inner {
        color: #fff;
        box-shadow: unset;
      }
    }
  }
  .pie-chart {
    display: grid;
    grid-template-columns: repeat(3, 33%);
    & > div {
      height: 420px;
    }
    & > div:nth-child(2) {
      border-left: 10px solid #f6f9fc;
      border-right: 10px solid #f6f9fc;
    }
  }
}
</style>
